<!doctype html>
<html>
<head design-width="750">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>jQuery手机账号管理表单代码 - 站长素材</title>

<link rel="stylesheet" href="assets/css/style1.css" /><!--页面样式-->

<script src="assets/js/auto-size.js"></script><!--设置字体大小-->
<script src="assets/js/jquery-2.2.4.min.js"></script><!--设置字体大小-->

</head>
<body>
<div id="app">
	<div class="mobile-wrap center mobile-wrap-mb">
		
		<header>
			<span class="return"><button onclick="window.location.href='indextest.html'">
				返回
			</button></span>
		</header>
		<main>
			<div class="inform">
				<h3>账号管理</h3>
				<div class="inform-list">
					<ul>
						<li>修改信息</li>
						<li class="acti">修改信息</li>
						<li>修改信息</li>
					</ul>
				</div>
				<div class="inform-text show">
					<p>
						<span>
							账户名
						</span>
						<input v-model="account.accountAccount" type="text"/>
					</p>
					<p>
						<span>
							账户密码
						</span>
						<input v-model="account.accountPassword" type="text"/>
					</p>
					<h4>
						<input type="submit" v-on:click="updateAccount()" value="确定修改" />
						<a href="#">遇到问题？</a>
					</h4>
				</div>
				<div class="inform-text">
					<p>
						<span>
							账户名
						</span>
						<input readonly="true" v-model="account.accountAccount" type="text"/>
					</p>
					<p>
						<span>
							账户密码
						</span>
						<input readonly="true" v-model="account.accountPassword" type="text"/>
					</p>
					<h4>
						<input type="submit" v-on:click="updateAccount()" value="确定修改" />
						<a href="#">遇到问题？</a>
					</h4>
				</div>
				<div class="inform-text">
					<p>
						<span>
							账户名
						</span>
						<input v-model="account.accountAccount" type="text"/>
					</p>
					<p>
						<span>
							账户密码
						</span>
						<input v-model="account.accountPassword" type="text"/>
					</p>
					<h4>
						<input type="submit" v-on:click="updateAccount()" value="确定修改" />
						<a href="#">遇到问题？</a>
					</h4>
				</div>
			</div>
		</main>

	</div><!--mobile_wrap-->
</div>

<script type="text/javascript">
	$('.inform-list ul li').click(function(){
		var n=$(this).index();
		$(this).addClass('acti').siblings().removeClass('acti');
		$('.inform-text').fadeOut();
		$('.inform-text').eq(n).fadeIn();
	})
</script>

</body>
	<script src="assets/js/vue.js"></script>
	<script src="assets/js/axios.min.js"></script>
	<script src="assets/js/const.js"></script>
	
	<script>
		var vue = new Vue({
			"el":"#app",
			"data":function(){
				return{
					"account":{}
				}
			},
			"methods":{
				selectById:function(id){
					//http://localhost:9092/account/selectById?id=1
					var url = baseUrl+"/account/selectById?id="+id;
					console.log(url);
					axios.get(url)
					.then(function(response){
						var serverResult = response.data;
						var account = serverResult.data;
						this.vue.account = account;
						// console.log(item);
					})
					.catch(function(response){
						window.alert("test失败")
					});
				},
				updateAccount:function(){
					// var url = baseUrl+"/account/updateaccount?"
					// +"accountId="+window.localStorage.getItem("userid")
					// +"&accountAccount="+this.account.accountAccount
					// +"&accountPassword="+this.account.accountPassword;
					var url = `${baseUrl}/account/updateaccount?
						accountId=${window.localStorage.getItem('userid')}
						&accountAccount=${this.account.accountAccount}
						&accountPassword=${this.account.accountPassword}
						`;
					console.log(url);
					axios.get(url)
					.then(function(response){
						// window.alert("联网成功");
						var serverResult = response.data;
						var code = serverResult.code;
						var num = serverResult.data;
						if(code == 0){
							window.alert("修改成功,修改了"+num+"行");
							//更新界面
							this.vue.selectById(this.vue.account.accountId());
						}else{
							window.alert("修改失败!");
						}
					})
					.catch();
				}
				
			},
			"mounted":function(){
				var id = window.localStorage.getItem("userid");
				
				this.selectById(id);
			}
		});
	</script>

</html>